<template>
  <view class="taskListDetailPage">
    <view class="toolBar">
      <uni-card is-shadow class="cardCls">
        <button v-if="taskList?.status===1" class="btnCls" @click="handleUpdate">修改</button>
      </uni-card>
    </view>
    <view>
      <uni-card is-shadow :isFull="true" class="cardCls">
        <text>任务名称：{{ taskList?.title }}</text>
        <br/>
        <text>任务详情：{{ taskList?.description }}</text>
        <br/>
        <text>任务标签：{{ taskList?.tags }}</text>
        <br/>
        <text>任务类型：{{ taskList?.taskType }}</text>
        <br/>
        <text>任务状态：{{ taskList?.status }}</text>
        <br/>
        <text>开始时间：{{ taskList?.startDate }}</text>
        <br/>
        <text>结束时间：{{ taskList?.endDate }}</text>
        <br/>
      </uni-card>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ref, watch} from 'vue'
import {onLoad} from "@dcloudio/uni-app";
import {getTaskListByIdUsingGet} from "@/services/api/taskListController";

const taskListId = ref(0)
const taskList = ref<API.TaskList>({})

/**
 * 加载数据
 */
const loadTaskListData = async () => {
  uni.showLoading({
    title: '加载中'
  });
  const data = await getTaskListByIdUsingGet({id: taskListId.value}) as API.TaskList;
  if (data) {
    taskList.value = data;
  }
  uni.hideLoading();
}

/**
 * 修改事件
 */
const handleUpdate = () => {
  uni.redirectTo({
    url: "/pages/home/taskList/TaskListUpdate?id=" + taskListId.value
  });
}

/**
 * ID改变重新加载数据
 */
watch(taskListId, () => {
  loadTaskListData();
})

onLoad((options: any) => {
  taskListId.value = options.id
})

</script>

<style scoped>
.taskListDetailPage {
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(to right, #ebf1fd, #ffffff);

  .cardCls {
    margin-top: 5px;
    background-color: transparent;
  }

  .btnCls {
    width: 30vw;
    background: linear-gradient(to bottom, #ebf1fd, #ffffff); /* 渐变背景 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
    transition: all 0.2s ease; /* 悬浮过渡效果 */
  }

  .btnCls:hover {
    transform: translateY(-2px); /* 悬浮时上移 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 悬浮时阴影加深 */
  }
}

</style>
